<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="template">
<head th:replace="fragments/head::head"></head>
<body>
<th:block layout:fragment="content">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4>物料子件新增</h4>
                        <div class="ibox-tools">
                        </div>
                    </div>
                     <div class="row m-b-sm m-t-sm">
                            <div class="col-md-3 col-md-offset-3">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                       <input type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal" value="子件选择"></input>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button  onclick="deleteChildRow();" class="btn btn-sm btn-warning" type="button">子件删除</button>
                                    </span>
                                </div>
                            </div>
                             <div class="col-md-3">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button onclick="backToIndex();" class="btn btn-sm btn-success" type="button">返回</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    <div class="ibox-content">
                         <!-- 页面table -->
                        <div class="hr-line-dashed m-t-sm m-b-sm"></div>
                        <div style="width:1500px;overflow-x:scroll;">
	                         <table id="childgrid"></table> 
	                         <div id="childgridpager"></div>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    
    <!-- 弹出层 -->    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog" style="width:1400px;height:550px">
            <div class="modal-content">
            	<!-- 弹出层头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">子件选择</h4>
                </div>
                <!-- 弹出层内容 -->
                <div class="modal-body">
                   <div class="row">
			            <div class="col-sm-12">
			                <div class="ibox float-e-margins">
			                    <div class="ibox-content">
			                        <form class="form-horizontal m-t" id="childform">
			                             <!--物料基本信息-->
			                           <!-- <div class="panel-title">
					                        <h5 style="color:#293846;">子件基本信息</h5>
					                    </div> -->
			                            <div class="form-group">
			                                <label class="col-sm-1 control-label">子件编码：</label>
			                                <div class="col-sm-2">
			                                	<div class="input-group">
			                                    <input type="text" class="form-control formSubmit" readOnly="true"  skey="materialCode" id ="materialCode"  emsg="物料编码不能为空">
			                                     <span class="input-group-btn"> <input type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal1" value="查找"></input>
                                         		</span>
                                         		</div>
			                                    <!-- 主键 -->
			                                    <input type="hidden" class="form-control formSubmit" id="id" skey="id">
			                                    <!-- 父件BOMid -->
			                                    <input type="hidden" class="form-control formSubmit" th:value="${bomId}" id="bomId" skey="bomId">
			                                </div>
			                                <label class="col-sm-1 control-label">子件名称：</label>
			                                <div class="col-sm-2">
			                                	<input type="text" skey="materialName" id="materialName"  readOnly="true" class="form-control formSubmit">
			                                </div>
			                                <label class="col-sm-1 control-label">子件规格：</label>
			                                <div class="col-sm-2">
			                                    <input type="text" class="form-control formSubmit" readOnly="true"  skey="materialSpec" id="materialSpec" >
			                                </div>
			                            </div>
			                            <div class="form-group">
			                             <label class="col-sm-1 control-label">子件BOM版本：</label>
			                                <div class="col-sm-2">
			                                   <input type="text" class="form-control formSubmit" readOnly="true"  skey="materialBomVersion" id="materialBomVersion" >
			                                   <!-- 子件BOMId -->
			                                   <input type="hidden" class="form-control formSubmit"   skey="materialBomId" id="materialBomId" >
			                                </div>
			                                <label class="col-sm-1 control-label">计量单位：</label>
			                                <div class="col-sm-2">
			                                	<input type="text" class="form-control formSubmit" readOnly="true"  skey="materialBomUnit" id="materialBomUnit">
			                                </div>
			                                <label class="col-sm-1 control-label">分母用量：</label>
			                                <div class="col-sm-2">
			                                   <input type="number" class="form-control formSubmit" skey="denominatorDosage" id="denominatorDosage" >
			                                </div>
			                            </div>
			                            <div class="form-group">
			                             <label class="col-sm-1 control-label">分子用量：</label>
			                                <div class="col-sm-2">
			                                    <input type="number" class="form-control formSubmit" skey="numeratorDosage" id="numeratorDosage" >
			                                </div>
			                                <label class="col-sm-1 control-label">需用数量：</label>
			                                <div class="col-sm-2">
			                                    <input type="number" class="form-control formSubmit" skey="requirementDosage" id="requirementDosage" >
			                                </div>
			                                <label class="col-sm-1 control-label">损耗率%：</label>
			                                <div class="col-sm-2">
			                                    <input type="number" class="form-control formSubmit" skey="attritionRate" id="attritionRate" >
			                                </div>
			                            </div>
			                            <div class="form-group">
			                                <label class="col-sm-1 control-label">生产数量：</label>
			                                <div class="col-sm-2">
			                                    <input type="number"  class="form-control formSubmit"  skey="productionDosage" id="productionDosage" ></input>
			                                </div>
			                            </div>
			                            <div class="form-group">
			                                <label class="col-sm-1 control-label">备注：</label>
			                                <div class="col-sm-11">
			                                    <input type="text"  class="form-control formSubmit" skey="remark" id="remark" ></input>
			                                </div>
			                            </div>
			                            <div class="form-group">
			                                <div class="col-sm-8 col-sm-offset-3">
			                                    <button class="btn btn-primary" type="button" onclick="saveChildBom();">保存</button>
			                                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
			                                </div>
			                            </div>
			                        </form>
			                    </div>
			                </div>
			            </div>
			        </div>
		          </div>
                </div>
            </div>
        </div>
    
   	<!-- 弹出层 -->    
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog" style="width:1100px;height:600px">
            <div class="modal-content">
            	<!-- 弹出层头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">父件选择</h4>
                </div>
                <!-- 弹出层内容 -->
                <div class="modal-body">
                   <div class="hr-line-dashed m-t-sm m-b-sm"></div>
                   <div style="width:1000px;overflow-x:scroll;">
		            <table id="callbackgrid" ></table> 
		            <div id="callbackpager" ></div> 
		           </div>
                </div>
                <!-- 弹出层尾部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div> 
    

    <!--<div th:replace="/department/model::modelDiv"></div>-->
    <js th:replace="/eng/bom/add/businessJs::businessJs"></js>
    <script th:src="@{/js/qzd.js}"></script>
     <script>
     $(document).ready(function(){
    	 $(function(){ 
    		//初始化弹出层数据
          	pageInit(); 
    		//初始化带回网格数据
         	childgridInit();
         }); 
    	//页面加载完成之后
         var  bomId = $("#bomId").val();
    	 function pageInit(){ 
          	var lastsel; 
          	 jQuery("#callbackgrid").jqGrid( {
          		//初始化页面时加载数据
          		url : '/eng/material/info/data', 
          		//数据传输解析格式设置
          		datatype : "json", 
          		//页面加载样式
          		styleUI: 'Bootstrap',
          		//表头列名称
          		colNames : [ '存货ID','所属公司','物料编码','物料名称','物料规格','品牌','物料类型','计量单位',
                              '计价方式','是否停用','是否可销售','是否外购','是否生产耗用','是否虚拟件','是否委外','现存量',
                              '可用量','最小包装量','图片','创建人','创建日期','备注'], 
          		//列模型属性配置
          		colModel : [ 
 					{name: 'id',index: 'id',hidden:true },
 					{name: 'companyId',index: 'companyId',hidden:true},
 					{name: 'materialCoding',index: 'materialCoding'},
 					{name: 'materialName',index: 'materialName'},
 					{name: 'materialSpec',index: 'materialSpec'},
 					{name: 'brandId',index: 'brandId',hidden:true},
 					{name: 'materialTypeId',index: 'materialTypeId',hidden:true},
 					{name: 'measurementUId',index: 'measurementUId'},
 					{name: 'materialPriceTypeId',index: 'materialPriceTypeId',hidden:true},
 					{name: 'isNoUsed',index: 'isNoUsed',
 						//渲染
          				formatter: function (value, grid, rows, state) { 
          					if (value == "false" || !value)
         				        return '<span style="color:red;">X</span>';
         				    else
         				        return '<span style="color:green;">√</span>'; 
          					}
 						},
 					{name: 'isSale',index: 'isSale'},
 					{name: 'isBuy',index: 'isBuy'},
 					//是否生产耗用
 					{name: 'isProdConsumption',index: 'isProdConsumption'},
 					{name: 'isVirtual',index: 'isVirtual'},
 					{name: 'isOutsource',index: 'isOutsource'},
 					{name: 'onHandQuantity',index: 'onHandQuantity'},
 					{name: 'availableQuantity',index: 'availableQuantity'},
 					{name: 'minimumPackingQuantity',index: 'minimumPackingQuantity'},
 					/* {name: 'cumulative_stock'},
 					{name: 'cumulative_return','defaultContent':''},
 					{name: 'cumulative_shipments','defaultContent':''},
 					{name: 'cumulative_withdrawal','defaultContent':''}, */
 					{name: 'pictureAddr',index: 'pictureAddr'},
 					{name: 'creatorId',index: 'creatorId'},
 					{name: 'ctime',index: 'ctime'},
 					{name: 'remark',index: 'remark'}
          			],
          		//表格自适应宽度
          		autoWidth:true,
          		shrinkToFit: true,
          		//width:1000, 
          		//autoScroll: true,
              	height: 350,
          		//每页显示的条数
          		rowNum : 10,
          		//配置分页显示信息
          		rowList : [ 10, 20, 30 ], 
          		//绑定分页工具栏
          		pager : '#callbackpager', 
          		//用数组展示 可排序列
          		sortname : 'id', 
          		//显示当前网格数据条数
          		viewrecords : true, 
          		//排序方式 
          		sortorder : "desc", 
          		//multiselect: true,
          		altRows: true,  
                  rownumbers: true,
          		//编辑完成后向台提交
          		editurl : "/RowEditing", 
          		//网格标题
          		caption : "物料清单",
          		//网格双击事件
          		ondblClickRow: function (id){ 
          			//获取当前弹出层的数据
          			var rowData = $("#callbackgrid").jqGrid("getRowData",id);
          			//获取需要带回网格所有的数据IDS (ids为一个数组)
          			var ids = jQuery("#childgrid").jqGrid('getDataIDs');
          			
          			//回填网格 子件form编码
         			$("#materialCode").val(rowData.materialCoding); 
         			//回填父件名称
         			$("#materialName").val(rowData.materialName); 
         			//回填规格型号
         			$("#materialSpec").val(rowData.materialSpec);
         			//设置计量单位id
         			$("#measurementUId").val(rowData.measurementUId);
         			//设置计量单位名称
         			$("#measurementUName").val(rowData.measurementUId);
         			//设置物料信息带回
         			$("#materialInfoId").val(rowData.id);
         			$("#bomId").val(bomId);
         			
          			//关闭弹出层
          			$("#myModal1").modal('hide');
          		}
          	}); 
          	// 配置jqgrid 下方的导航信息
          	jQuery("#callbackgrid").jqGrid('navGrid', "#callbackpager", { edit : false, add : false, del : false, position: "left" },{},{},{},{multipleSearch:true});  
          };
         //初始化子件列表网格
         function childgridInit(){ 
          	var lastsel; 
            var  bomId = $("#bomId").val();
            alert(bomId);
          	 jQuery("#childgrid").jqGrid( {
          		//初始化页面时加载数据
          		url : '/eng/bom/getChildByBomId', 
         		//数据传输解析格式设置
         		datatype : "json", 
          		//页面加载样式
          		styleUI: 'Bootstrap',
          		postData : {bomId : bomId},
          		//表头列名称
          		colNames : ["子件ID","子件编码","子件名称","规格","父件件BOM ID",
          		             	"子件BOMID","子件BOM版本","计量单位","分母用量","分子用量",
          		             		"需用数量","损耗率","生产数量","工序ID","修改日期","备注","物料信息ID"], 
          		//列模型属性配置
          		colModel : [ 
					//子件ID
					{name: 'id',index: 'id',key:true},
					//子件编码
					{name: 'materialCode',index: 'materialCode'},
					//子件名称
					{name: 'materialName',index: 'materialName'},
					//子件规格
					{name: 'materialSpec',index: 'materialSpec'},
					//父件BOMID  父件BOMID 字段隐藏
					{name: 'bomId',index: 'bomId' ,hidden:true },
					//子件BOMID
					{name: 'materialBomId',index: 'materialBomId' },
					//子件BOM版本号
					{name: 'materialBomVersion',index: 'materialBomVersion' },
					//计量单位
					{name: 'materialBomUnit',index: 'materialBomUnit' },
					//分母用量
					{name: 'denominatorDosage',index: 'denominatorDosage' ,editable : true, editor:{type:"number"}},
					//分子用量
					{name: 'numeratorDosage',index: 'numeratorDosage',editable : true, editor:{type:"number"}},
					//需用数量
					{name: 'requirementDosage',index: 'requirementDosage',editable : true,editor:{type:"number"}},
					//损耗率
					{name: 'attritionRate',index: 'attritionRate',editable : true, editor:{type:"number"}},
					//生产数量
					{name: 'productionDosage',index: 'productionDosage',editable : true, editor:{type:"number"}},
					//工序ID
					{name: 'procedureId',index: 'procedureId'},
					//修改时间
					{name: 'modifyTime',index: 'modifyTime',editable : true,edittype:"date"},
					//备注
					{name: 'remark',index: 'remark',editable : true,editor:{type:"textarea"}},
					//物料信息id
					{name: 'materialInfoId',index: 'materialInfoId' }

          			],
          		//表格自适应宽度
          		autoWidth:true,
	    		autoScroll: true,
          		//每页显示的条数
          		rowNum : 10,
          		//配置分页显示信息
          		rowList : [ 10, 20, 30 ], 
          		//绑定分页工具栏
          		pager : '#childgridpager', 
          		//用数组展示 可排序列
          		sortname : 'id', 
          		//显示当前网格数据条数
          		viewrecords : true, 
          		//排序方式 
          		sortorder : "desc", 
          		//multiselect: true,
          		altRows: true, 
          		gridview: true,
               	rownumbers: true,
          		//网格标题
          		caption : "子件信息",//网格双击事件
          		editurl:'/eng/bom/editChildById'
          	}); 
          	jQuery("#childgrid").jqGrid('navGrid', "#childgridpager", { edit : true, add : false, del : false, position: "left",searchtext: "查找",
                addtext: "添加",
                edittext: "子件编辑",
                deltext: "删除",
                refreshtext:"刷新" },{},{},{},{multipleSearch:true});
          };
          //页面初始化时为弹出层添加关闭（隐藏）事件   当弹出层页面关闭时清空form    同理(弹出层显示时事件)还有$("#myModal").on("show.bs.modal", function() {})
          $("#myModal").on("hidden.bs.modal", function() {
        	    $(this).removeData("bs.modal");
        	    $("#childform")[0].reset();
        	    //var queryData={
      	    	//	"username":1,
      	    	//	"userstatus":2
        	   //};
        	   //$("#childgrid").jqGrid("setGridParam", { postData: queryData,url:'aaaaaaaaaaaaaa.html' }).trigger("reloadGrid");
        	   $("#childgrid").trigger("reloadGrid");
        	   
        	});
    	 }); 
     </script>
</th:block>
</body>
</html>